<template>
  <lay-container fluid="true" style="padding: 10px; height: calc(100% - 20px)">
    <lay-card height="100%">
      <lay-row space="10">
        <lay-col md="24">
          <lay-quote size="sm">
            <span> 用户管理列表 : </span>
          </lay-quote>
        </lay-col>
      </lay-row>
      <lay-row space="10">
        <lay-col span="12">
          <lay-form :model="userInfo" pane="true">
            <lay-row>
              <lay-col md="8">
                <lay-form-item label="工号" prop="rule_name" mode="inline">
                  <lay-input v-model="userInfo.user_no" class="form_input" :size="globalSize"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col md="8">
                <lay-form-item label="用户名" prop="rule_id" mode="inline">
                  <lay-input v-model="userInfo.username" class="form_input" :size="globalSize"></lay-input>
                </lay-form-item>
              </lay-col>
              <lay-col md="6">
                <lay-button type="normal" @click="queryUserList" :size="globalSize">
                  查询
                </lay-button>
                <lay-button type="" @click="" :size="globalSize">重置</lay-button>
              </lay-col>
            </lay-row>
          </lay-form>
        </lay-col>
      </lay-row>
      <lay-row space="10">
        <lay-col md="24">
            <lay-table
              :size="globalSize"
              ref="tableRef"
              :loading="loading"
              :default-toolbar="true"
              :height="tableHeight"
              :maxHeight="tableHeight"
              :page="page"
              :columns="columns"
              id="id"
              @change="queryUserList"
              :dataSource="dataSource"
            >
              <template v-slot:operator="{ data }">
                <lay-button size="xs" type="normal" @click="setUserRole(data)">设置角色</lay-button>
                <lay-button size="xs" type="danger" @click="deleteUserOperation(data)">删除用户</lay-button>
              </template>
            </lay-table>
        </lay-col>
        <lay-col></lay-col>
      </lay-row>
      </lay-card>
    </lay-container>
</template>

<script lang="ts">
export default {
    name: 'userManager'
}
</script>

<script lang="ts" setup>
import {ref, reactive, watch, onMounted, h} from "vue";
import {deleteUser, getUserList} from "../../../api/module/user";
import {layer} from "@layui/layui-vue";
import setRole from "../../../components/System/setRole.vue";

const userInfo = reactive({username: '', user_no: ''})

const loading = ref(false);
const tableRef = ref();
const page = reactive({ current: 1, limit: 10, total: 10 });


// 定义组件的高度，间距，大小等
const tableHeight = ref('400px');
const space = ref(20);
const globalSize = ref('md');

const selectedKeys = ref(["1"]);

const col_operate = reactive({
    title: "操作",
    width: "160px",
    customSlot: "operator",
    key: "operator",
    fixed: "right"
});

const columns = ref([
    {
      title: "工号",
      width: "80px",
      key: "user_no",
    },
    {
      title: "用户名",
      width: "80px",
      key: "username",
    },

    {
      title: "邮箱",
      width: "80px",
      key: "email",
    },

]);

const dataSource = ref([
  { id: "1", username: "李吉凯", user_no: "34925", email: "lijk34925@hundsun.com" },
  { id: "2", username: "途胜慧", user_no: "48443", email: "tush48443@hundsun.com" },
]);

const queryUserList = async () => {
    loading.value = true;
    setTimeout(async () => {
        let params = reactive({username: userInfo.username, user_no: userInfo.user_no,
            current: page.current, limit: page.limit})
        let {result, status, message} = await getUserList(params);
        if(status === 'success'){
            page.total = result.total;
            columns.value = result.columns;
            dataSource.value = result.data_source;
        }
        columns.value.push(col_operate);
    }, 500)
    loading.value = false;
}

onMounted(() => {
    queryUserList();
})

const setUserRole = (data: any) => {
  layer.open({
      type: "page",
      title: "设置该用户为管理员角色",
      area: ['450px','220px'],
      content: h(setRole, { user_info: data })
  })
}

const deleteUserOperation = (data: any) => {
    layer.confirm("你确定要删除该用户吗？",
        {
            btn: [
                {text:'确定', callback: async (id) => {
                    let {result, status, message} = await deleteUser({user_no: data.user_no});
                    layer.msg(message);
                    const index = dataSource.value.indexOf(data);
                    dataSource.value.splice(index,1);
                    layer.close(id);
                    }
                },
                {text:'取消', callback: (id) => {
                    layer.close(id); }
                }
            ]
        }
    );
}

watch(selectedKeys, () => {
  console.log("打印")
})
</script>
